<script setup lang="ts">
import barLine from "./chart/barLine.vue";
import lineBar from "./chart/lineBar.vue";
import satisBar from "./chart/satisBar.vue";
import atlasMap from "./chart/atlas.vue";
import socialRankBar from "./chart/socialRankBar.vue";
import { reactive, ref } from "vue";
import {
  provinceAndCityDataPlus,
  CodeToText,
  convertTextToCode
} from "@/utils/chinaArea";

const barLineRef = ref();
const barTime = ref("");

const lineBarRef = ref();
const lineTime = ref("");

const capitalOption = [
  {
    name: "政府",
    children: [
      "杭州青青草公益服务中心 1-政府",
      "杭州青青草公益服务中心 2-政府",
      "杭州青青草公益服务中心 3-政府"
    ]
  },
  {
    name: "基金会",
    children: [
      "杭州青青草公益服务中心 1-基金会",
      "杭州青青草公益服务中心 2-基金会",
      "杭州青青草公益服务中心 3-基金会"
    ]
  },
  {
    name: "社会组织",
    children: [
      "杭州青青草公益服务中心 1-社会组织",
      "杭州青青草公益服务中心 2-社会组织",
      "杭州青青草公益服务中心 3-社会组织"
    ]
  },
  {
    name: "慈善信托",
    children: [
      "杭州青青草公益服务中心 1-慈善信托",
      "杭州青青草公益服务中心 2-慈善信托",
      "杭州青青草公益服务中心 3-慈善信托"
    ]
  },
  {
    name: "个人",
    children: [
      "杭州青青草公益服务中心 1-个人",
      "杭州青青草公益服务中心 2-个人",
      "杭州青青草公益服务中心 3-个人"
    ]
  },
  {
    name: "其他",
    children: [
      "杭州青青草公益服务中心 1-其他",
      "杭州青青草公益服务中心 2-其他",
      "杭州青青草公益服务中心 3-其他"
    ]
  },
  {
    name: "企业",
    children: [
      "杭州青青草公益服务中心 1-企业",
      "杭州青青草公益服务中心 2-企业",
      "杭州青青草公益服务中心 3-企业"
    ]
  }
];
const projectObj = reactive({
  capital: "",
  project: ""
});
const projectOption = ref([]);

const getProjectFee = val => {
  let arr = [];
  projectObj.project = "";
  capitalOption.map(item => {
    if (val.includes(item.name) || val.length === 0) {
      arr.push(...item.children);
    }
  });
  projectOption.value = arr;
};
getProjectFee([]);
const area = ref();
const atlasMapRef = ref();
const handleChange = val => {
  if (!val) {
    atlasMapRef.value.renderEcharts("100000");
    return;
  }
  let num1 = convertTextToCode(
    CodeToText[val[0]],
    CodeToText[val[1]],
    CodeToText[val[2]]
  );
  let code = "100000";
  if (num1) {
    let arr = num1.split(",");
    code = arr.shift().trim();
  }
  atlasMapRef.value.renderEcharts(code);
};
import lineBarTwo from "@/views/welcome/chart/lineBarTwo.vue";
const lineBarTwoRef = ref("");
const lineBarChange = () => {
  lineBarRef.value.getBarLineMEthod();
  lineBarTwoRef.value.getBarLineMEthod();
};
import pieChart from "./chart/pie.vue";
import { lineChart } from "./components/chart";
import GroupLine from "@iconify-icons/ri/group-line";
import Question from "@iconify-icons/ri/question-answer-line";
import CheckLine from "@iconify-icons/ri/chat-check-line";
import Smile from "@iconify-icons/ri/star-smile-line";
import { ReNormalCountTo } from "@/components/ReCountTo";
import SubLine from "./chart/subLine.vue";
const subLineRef = ref("");
const subValue = ref("");
</script>
<template>
  <div class="m-[20px] mb-0">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card :body-style="{ padding: '0 10px' }">
          <template #header> 总体项目执行情况 </template>
          <pieChart
            title="2363"
            subtext="子项目总数"
            :server="[
              { value: 1048, name: '进行中' },
              { value: 735, name: '已完成' },
              { value: 580, name: '延期中' }
            ]"
          />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '0 10px' }">
          <template #header>
            <div class="flex justify-between">
              项目资助金额情况
              <div>
                <el-date-picker
                  class="!w-[200px]"
                  v-model="subValue"
                  size="small"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  @change="subLineRef.getBarLineMEthod()"
                />
              </div>
            </div>
          </template>
          <SubLine ref="subLineRef" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header> 项目累计服务人次</template>
          <div class="flex justify-between">
            <div>
              <ReNormalCountTo
                :duration="1500"
                :fontSize="'1.6em'"
                :startVal="100"
                :endVal="16499"
              />
              <p>
                <span class="text-[14px]">环比增长</span>
                <span class="font-medium text-green-500 ml-[5px]">90%</span>
              </p>
            </div>
            <lineChart
              class="!w-1/2"
              color="#41b6ff"
              :data="[2101, 5288, 4239, 4962, 6752, 5208, 7450]"
            />
          </div>
        </el-card>
        <el-card class="mt-[20px]">
          <template #header>项目累计活动次数</template>
          <div class="flex justify-between mb-[10px]">
            <div>
              <ReNormalCountTo
                :duration="1500"
                :fontSize="'1.6em'"
                :startVal="100"
                :endVal="1650"
              />
              <p>
                <span class="text-[14px]">环比增长</span>
                <span class="font-medium text-green-500 ml-[5px]">90%</span>
              </p>
            </div>
            <lineChart
              class="!w-1/2"
              color="#41b6ff"
              :data="[2101, 5288, 4239, 4962, 6752, 5208, 2450]"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <el-row justify="space-around">
    <el-col :span="18">
      <el-card :body-style="{ padding: '0 20px 20px' }" class="m-[20px]">
        <template #header>
          <div class="flex justify-between">
            项目总览情况
            <span>
              <el-date-picker
                style="width: 300px"
                v-model="barTime"
                @change="barLineRef.getBarLineMEthod()"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </span>
          </div>
        </template>
        <barLine ref="barLineRef" />
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card
        :body-style="{ padding: '0 15px 10px 10px' }"
        class="mt-[20px] mr-[20px] mb-[20px]"
      >
        <template #header
          ><span class="h-[32px] flex items-center">项目满意度</span></template
        >
        <div class="mt-[10px]">
          <satisBar />
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-card class="m-[20px] mt-[0]">
    <template #header>
      <div class="flex justify-between">
        项目费用/活动情况
        <span>
          <el-select
            @change="
              val => {
                getProjectFee(val);
                lineBarChange();
              }
            "
            v-model="projectObj.capital"
            placeholder="请选择资助方类型"
            class="!w-[170px] mr-[20px]"
            multiple
            clearable
            collapse-tags
          >
            <el-option
              v-for="item in capitalOption"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select
            @change="lineBarChange()"
            class="!w-[170px] mr-[20px]"
            v-model="projectObj.project"
            placeholder="请选择项目"
            multiple
            clearable
            collapse-tags
          >
            <el-option
              v-for="item in projectOption"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-date-picker
            style="width: 300px"
            v-model="lineTime"
            @change="lineBarChange()"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :span="12">
        <lineBar ref="lineBarRef" />
      </el-col>
      <el-col :span="12">
        <lineBarTwo ref="lineBarTwoRef" />
      </el-col>
    </el-row>
  </el-card>
  <el-card class="m-[20px] mt-[0]">
    <template #header>
      <div class="flex justify-between">
        社会组织总览
        <span>
          <el-cascader
            clearable
            style="width: 200px"
            v-model="area"
            placeholder="请选择区域"
            :options="provinceAndCityDataPlus"
            class="w-full"
            @change="handleChange"
          />
        </span>
      </div>
    </template>
    <el-row class="justify-between">
      <el-col :span="15">
        <atlasMap ref="atlasMapRef" />
      </el-col>
      <el-col :span="6">
        <div class="mb-[20px]">
          {{ area ? CodeToText[area[0]] : "全国" }}组织总数量:
          {{ parseInt(atlasMapRef ? atlasMapRef.total : 0) }}
        </div>
        <satisBar />
      </el-col>
    </el-row>
  </el-card>
  <div class="h-[80px]"></div>
</template>

<style lang="scss" scoped></style>
